<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="type">
              <el-select v-model="searchForm.type" clearable placeholder="任务主题">
                <el-option v-for="item in typeList" :value="item.id" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="applyName">
                <el-input v-model="searchForm.applyName" clearable placeholder="申请人姓名"></el-input>
            </el-form-item>
            <el-form-item prop="applyTelephone">
                <el-input v-model="searchForm.applyTelephone" clearable placeholder="申请人手机号"></el-input>
            </el-form-item>
            <el-form-item prop="employeCode">
                <el-input v-model="searchForm.employeCode" clearable placeholder="审核人工号"></el-input>
            </el-form-item>
            <el-form-item prop="employeName">
                <el-input v-model="searchForm.employeName" clearable placeholder="审核人姓名"></el-input>
            </el-form-item>
            <el-form-item prop="">
              <el-date-picker v-model="applyTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="申请开始日期" end-placeholder="申请结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="a">
              <el-date-picker v-model="auditTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="审核开始日期" end-placeholder="审核结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <el-radio-group v-model="searchForm.status" size="small" @change="handleSearch" >
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.id" v-for="item in statusList">{{item.name}}</el-radio-button>
            </el-radio-group>
            <el-radio-group v-model="searchForm.readStatus" size="small" @change="handleSearch" style="padding-left: 15px;">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.id" v-for="item in readStatusList">{{item.name}}</el-radio-button>
            </el-radio-group>

          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
              <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
          </div>
        </div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%" row-key="id" border :height="tableHeight"  stripe v-loading="loading">
            <el-table-column prop="taskId" label="编号" v-if="!hideTableColumn.includes('number')" width="160" align="center"></el-table-column>
            <el-table-column prop="title" label="任务主题" v-if="!hideTableColumn.includes('taskName')" width="120" align="center"></el-table-column>
            <el-table-column prop="content" label="任务内容" v-if="!hideTableColumn.includes('taskContent')"></el-table-column>
            <el-table-column prop="name" label="申请人(手机号)" v-if="!hideTableColumn.includes('phone')" align="center">
               <template #default="scope">
                 <div>{{scope.row.insertName}}</div>
                 <div>{{scope.row.insertTelephone}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="申请日期" v-if="!hideTableColumn.includes('time')" width="170" align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.insertDate) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="审核人(工号)" v-if="!hideTableColumn.includes('auditNumber')" align="center">
              <template #default="scope">
                 <div v-for="(item,index) in scope.row.examines" v-if="scope.row.type=='2'||scope.row.type=='4'">{{index=='0'?'初审':'复审'}}:{{item.employeName}}{{scope.row.insertTelephone}}</div>
                 <div v-for="(item,index) in scope.row.examines" v-else>{{item.employeName}}{{scope.row.insertTelephone}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="审核日期" v-if="!hideTableColumn.includes('auditTime')" align="center">
              <template #default="scope">
                 <div v-for="(item,index) in scope.row.examines" v-if="scope.row.type=='2'||scope.row.type=='4'">{{index=='0'?'初审':'复审'}}:{{ parseTime(item.insertDate) }}</div>
                 <div v-for="(item,index) in scope.row.examines" v-else>{{ parseTime(item.insertDate) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="审核备注" v-if="!hideTableColumn.includes('remark')" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="状态" v-if="!hideTableColumn.includes('status')" width="100" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status=='1'">未查看</el-tag>
                <el-tag type="success" v-else-if="scope.row.status=='2'">已查看</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作" width="160" align="center">
              <template #default="scope">
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-document-checked"
                    @click="handleDetail(scope.row)"
                  >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
         <MyPagination
           :total="total"
           :page.sync="searchForm.pageNum"
           :limit.sync="searchForm.pageSize"
           @pagination="dataInfo"
         />
        </div>
      </el-col>
    </el-row>



  </div>
</template>

<script>
  import {
    getTaskList
  } from '@/api/getData'
  import option from '../../common/option.js';

  export default {
    data() {
      return {
        loading: false,
        statusList:[{id:'1',name:'待审核'},{id:'2',name:'审核通过'},{id:'3',name:'审核未通过'}],
        readStatusList:[{id:'1',name:'未查看'},{id:'2',name:'已查看'}],
        typeList:[{id:1,name:'实名认证审核'},{id:2,name:'用户加盟审核'},{id:3,name:'门店入驻审核'},{id:4,name:'加盟提额审核'},{id:5,name:'商家提额审核'}],
        applyTime:[],
        auditTime:[],
        searchForm: {
          type:'',
          applyName:'',
          applyTelephone:'',
          employeCode:'',
          employeName:'',
          levelId:'',
          status:'',
          readStatus:'',

          pageNum:1,
          pageSize:20,
         },
        tableColumn:[{/*自定义表格列*/
            name:'编号',
            value:'number'
        },{
            name:'任务主题',
            value:'taskName'
        },{
            name:'任务内容',
            value:'taskContent'
        },{
            name:'申请人(手机号)',
            value:'phone'
        },{
            name:'申请日期',
            value:'time'
        },{
            name:'审核人(工号)',
            value:'auditNumber'
        },{
            name:'审核日期',
            value:'auditTime'
        },{
            name:'审核备注',
            value:'remark'
        },{
            name:'状态',
            value:'status'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度

        dataList:[],
        total: 0,
        multipleSelection: '',

      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      if(this.$route.query.readStatus){
        this.searchForm.readStatus = this.$route.query.readStatus;
      }
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
     handleSearch(){
         this.page = 1;
         this.dataInfo();
     },
     resetQuery(){
       this.applyTime = [];
       this.auditTime = [];
       this.resetForm('searchForm');
       this.dataInfo();
     },
     async dataInfo() {
       try {
         let data = this.addDateRange(this.searchForm, this.applyTime, 'applyStartTime', 'applyEndTime');
         data = this.addDateRange(this.searchForm, this.auditTime, 'checkStartTime', 'checkEndTime');
         this.loading = true;
         const result = await getTaskList(data);
         if (result.code == 200) {
           this.total = result.total;
           this.dataList = result.rows;
         } else {
           this.$message.error(result.msg);
         }
         this.loading = false;
       } catch (err) {
         this.loading = false;
         console.log(err)
       }
     },
    handleDetail(row){
      let type = row.type;
      if(type=='1'){//实名认证审核
        this.$router.push({path:'/audit/nameAttestationAudit'});
      }else if(type=='2'){//用户加盟审核
        this.$router.push({path:'/audit/joinApplyMsg?customerUnionId='+row.relationId});
      }else if(type=='3'){//门店入驻审核
        this.$router.push({path:'/user/applyStore?storeId='+row.relationId+'&type=detail&customerId='+row.relationId+'&entrance=audit'});
      }
    }

    }
  }
</script>

<style scoped lang="scss">
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
    }
</style>
